<template>
    <div class="home">
        <img alt="Vue logo" :src="logo" />
        <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
    </div>
</template>

<script lang="ts" setup>
import HelloWorld from "@/components/HelloWorld.vue"
import logo from "@/assets/vue.svg?url"
import benbi from "@/static/test.geojson?raw"
import { Cartesian3, createOsmBuildingsAsync, Ion, Math as CesiumMath, Terrain, Viewer } from "cesium"
import "cesium/Build/Cesium/Widgets/widgets.css"

console.log(JSON.parse(benbi))

window.CESIUM_BASE_URL = "/"


Ion.defaultAccessToken = "your_access_token"

// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
const viewer = new Viewer("cesiumContainer", {
    terrain: Terrain.fromWorldTerrain(),
})

// Fly the camera to San Francisco at the given longitude, latitude, and height.
viewer.camera.flyTo({
    destination: Cartesian3.fromDegrees(-122.4175, 37.655, 400),
    orientation: {
        heading: CesiumMath.toRadians(0.0),
        pitch: CesiumMath.toRadians(-15.0),
    },
})

const buildingTileset = await createOsmBuildingsAsync()
viewer.scene.primitives.add(buildingTileset)
</script>
